<template>
	<jk-dialog
		v-model="showDialog"
		:title="`${dateItem.date}-保养任务`"
		:show-content-loading="showContentLoading"
		:confirm-btn-loading="confirmBtnLoading"
		width="1000px"
		:append-to-body="false"
		:modal-append-to-body="false"
		:show-close-btn="true"
		:show-cancel-btn="false"
		:show-confirm-btn="false"
		@on-visible-change="onVisibleChange"
		@on-close="onVisibleChange(false)"
	>
		<jk-table v-loading="tableLoading" :data="tableData" border :height="dialogTableHeight - 60">
			<vxe-table-column field="code" title="任务单号" width="160" align="left"></vxe-table-column>
			<vxe-table-column field="machineCode" title="设备" :width="90" align="left"></vxe-table-column>
			<vxe-table-column field="upkeepItemName" title="保养项目" :min-width="100" align="left"></vxe-table-column>
			<vxe-table-column field="empName" title="计划保养人" :width="100"></vxe-table-column>
			<vxe-table-column field="planUpkeepTime" title="计划保养时间" :width="160"></vxe-table-column>
			<vxe-table-column field="cycleUnitName" title="周期" :width="100"></vxe-table-column>
			<vxe-table-column field="upkeepTypeName" title="保养分类" :width="100"></vxe-table-column>
			<vxe-table-column field="workshopName" title="区域" :width="90"></vxe-table-column>
			<vxe-table-column field="upkeepState" title="状态" :width="90">
				<template slot-scope="scope">
					<div class="flex-center">
						<jk-state-bar :state="scope.row.upkeepState" :state-list="upkeepStateList"></jk-state-bar>
					</div>
				</template>
			</vxe-table-column>
			<vxe-column title="操作" align="center" fixed="right" :width="180">
				<template slot-scope="scope">
					<div class="flex-center">
						<div class="item-gap"><el-button size="mini" type="success" :disabled="scope.row.upkeepState !== 0" @click="onTakeBtn(scope.row)">开始保养</el-button></div>
						<el-button size="mini" class="" :disabled="scope.row.upkeepState > 1" type="danger" @click="onEditBtn(scope.row)">完成保养</el-button>
					</div>
				</template>
			</vxe-column>
		</jk-table>
		<save-dialog
			:data-id="dataId"
			:dialog-state="saveDialogState"
			@on-visible-change="onVisibleChangeOfSaveDialog"
			@on-finish="onFinish"
		></save-dialog>
	</jk-dialog>
</template>

<script>
    import calDialogHeight from '../../../../mixins/cal-dialog-height';
    import upkeepMixin from '../upkeepItemPlan/upkeep';
    import {
        machineManagerUpkeepMachineJobPage,
        machineManagerUpkeepMachineJobTaking
    } from '../../../../api/machine/upkeepTask';
    import saveDialog from '../upkeepItemPlan/save-dialog';
    import { upkeepStateList } from '../../../../utils/jk/status-option-list';

    export default {
        components: {
            saveDialog
        },
        mixins: [calDialogHeight, upkeepMixin],
        props: {
            dateItem: {
                type: Object,
                default() {
                    return {};
                }
            },
            dialogState: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                upkeepStateList: upkeepStateList,
                rowItem: {},
                tableLoading: false,
                dataId: null,
                tableData: [],
                confirmBtnLoading: false,
                showContentLoading: false,
                showDialog: false,
                saveDialogState: false
            };
        },
        methods: {
            onVisibleChangeOfSaveDialog(e) {
                this.saveDialogState = e;
            },
            onFinish() {
                this.saveDialogState = false;
                this.getListRequest();
            },
            onTakeBtn(row) {
                this.$confirm(`确定"开始保养"吗？`, '提示', { type: 'warning' }).then(() => {
                    machineManagerUpkeepMachineJobTaking({
                        id: row.id
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.getListRequest();
                        }
                    });
                }).catch(() => {});
            },
            onEditBtn(row) {
                this.dataId = row.id;
                this.saveDialogState = true;
            },
            getListRequest() {
                this.showContentLoading = true;
                return machineManagerUpkeepMachineJobPage({
                    planUpkeepTime: [this.dateItem.date + ' 00:00:00', this.dateItem.date + ' 23:59:59'],
                    workshopId: this.dateItem.workshopId
                }).then(res => {
                    this.showContentLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res ? res.data.res.map(x => {
                            x.cycleUnitName = this.transferCircleUnit(x);
                            return x;
                        }) : [];
                    }
                });
            },
            onVisibleChange(e) {
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
                this.$emit('on-visible-change', e);
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getListRequest();
                }
            }
        }
    };
</script>
